<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌词滚动</title>
    <style>
        .con {
            min-width: 400px;
            height: 600px;
            margin: 300px auto;
        }
        p{
            /* text-align: center; */
            color: #369;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>

<body>
    <div class="con">
        <audio src="static/周杰伦-七里香.mp3" controls></audio>
        <p>

        </p>
    </div>
    <script src="js/lrc.js"></script>
    <script>
        $(function () {
            const audio = document.querySelector("audio")
            let oldstr=""
            $("audio").on("timeupdate", () => {
                let {currentTime}=audio
                // 格式化时间
                let minutes=parseInt(currentTime/60)
                let seconds=parseInt(currentTime%60)
                let timestr=(minutes<10?"0"+minutes:minutes)+":"+(seconds<10?"0"+seconds:seconds)
                const reg=new RegExp('\\['+timestr+'\\.\\d{2}\\](.+)')
                let lrc=reg.exec(str)
                if (lrc==null){
                    $("p").html(oldstr)  
                }else{
                    lrc=lrc[1]
                    oldstr=lrc
                    $("p").html(lrc)   
                }
                
            })
        })
    </script>
</body>

</html>